<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
            <el-breadcrumb-item :to="{ path: '/' }">
                <i class="el-icon-s-promotion"></i> 后台管理
            </el-breadcrumb-item>
            <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>

        <el-divider></el-divider>
        <div class="selectForm">
          <el-form :inline="true" :model="selectForm" class="demo-form-inline" style="float: left">
            <el-form-item label="权限名">
              <el-input v-model="selectForm.limitName" placeholder="权限名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSelectClick">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="danger" @click="onResetSelect">重置</el-button>
            </el-form-item>
          </el-form>
          <el-button @click="showEditFormDialogAddNew()" style="float: right;margin-bottom: 10px;">
            <i class="el-icon-circle-plus"></i>
            添加权限
          </el-button>
        </div>

      <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="100" align="center"></el-table-column>
            <el-table-column prop="limitName" label="权限名" align="center"  ></el-table-column>
            <el-table-column prop="created" label="创建时间" align="center"  ></el-table-column>
            <el-table-column prop="updated" label="修改时间" align="center"></el-table-column>
            <el-table-column label="操作" width="100" align="center" fixed="right">
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                    <el-button type="primary" icon="el-icon-edit" circle size="mini"
                               @click="showEditFormDialog(scope.row)"></el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="删除" placement="top">
                    <el-button type="danger" icon="el-icon-delete" circle size="mini"
                               @click="openDeleteConfirm(scope.row)"></el-button>
                  </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
        <!-- 以下是添加权限的弹出表单Dialog -->
        <el-dialog title="添加权限" :visible.sync="dialogFormVisibleAddNew" width="800px" style="text-align: left">
          <div style="width: 90%;">
            <el-form :model="addForm" label-width="140px">
                <el-form-item label="权限名">
                    <el-input v-model="addForm.limitName" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
          </div>
          <div slot="footer" class="dialog-footer" style="text-align: center">
            <el-button @click="dialogFormVisibleAddNew = false">取 消</el-button>
            <el-button type="primary" @click="submitAddNewForm()">确 定</el-button>
          </div>
        </el-dialog>

        <!-- 以下是修改权限的弹出表单Dialog -->
        <el-dialog title="修改权限" :visible.sync="dialogFormVisible" width="800px" style="text-align: left">
          <div style="width: 90%;">
            <el-form :model="editForm" label-width="140px">
                <el-form-item label="权限名">
                    <el-input v-model="editForm.limitName" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
          </div>
          <div slot="footer" class="dialog-footer" style="text-align: center">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitEditForm()">确 定</el-button>
          </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [],
                dialogFormVisible: false,
                dialogFormVisibleAddNew: false,
                editForm: {},
                addForm: {
                  limitName: ''
                },
                selectForm: {
                  limitName: ''
                },
                total: 0,
                currentPage: 1,
                pageSizes: [5,10,15,20],
                pageSize: 10,
                isSelect: false,
            }
        },
        methods: {
            submitAddNewForm(formName) {
                let url = 'http://localhost:8080/limits/add-new';

                let formData = this.qs.stringify(this.addForm);

                this.axios.post(url, formData).then((response) => {
                    let jsonResult = response.data;
                    if (jsonResult.state == 20000) {
                        this.$message({
                            message: '添加权限成功！',
                            type: 'success'
                        });
                        this.dialogFormVisibleAddNew = false;
                        this.loadlimitList();
                    } else {
                        this.$alert(jsonResult.message, '操作失败', {
                            confirmButtonText: '确定',
                            callback: action => {}
                        });
                    }
                });
            },
            showEditFormDialogAddNew(limit) {
              this.dialogFormVisibleAddNew = true;
            },
            showEditFormDialog(limit) {
                let url = 'http://localhost:8080/limits/' + limit.id;

                this.axios.get(url).then((response) => {
                    let jsonResult = response.data;
                    if (jsonResult.state == 20000) {
                        this.editForm = jsonResult.data;
                        this.dialogFormVisible = true;
                    } else if (jsonResult.state == 40400) {
                        this.$alert(jsonResult.message, '操作失败', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.loadlimitList();
                            }
                        });
                    } else {
                        this.$alert(jsonResult.message, '操作失败', {
                            confirmButtonText: '确定',
                            callback: action => {}
                        });
                    }
                });
            },
            submitEditForm() {
                let url = 'http://localhost:8080/limits/' + this.editForm.id + '/update';

                let formData = this.qs.stringify(this.editForm);

                this.axios.post(url, formData).then((response) => {
                    let jsonResult = response.data;
                    if (jsonResult.state == 20000) {
                        this.$message({
                            message: '修改权限成功！',
                            type: 'success'
                        });
                        this.dialogFormVisible = false;
                        this.loadlimitList();
                    } else if (jsonResult.state == 40400) {
                        this.$alert(jsonResult.message, '操作失败', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.dialogFormVisible = false;
                                this.loadlimitList();
                            }
                        });
                    } else if (jsonResult.state == 40900) {
                        this.$message.error(jsonResult.message);
                    } else {
                        this.$alert(jsonResult.message, '操作失败', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.dialogFormVisible = false;
                            }
                        });
                    }
                });
            },
            openDeleteConfirm(limit) {
                let message = '此操作将永久删除【' + limit.limitName + '】权限，是否继续？';
                this.$confirm(message, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.handleDelete(limit);
                }).catch(() => {
                });
            },
            handleDelete(limit) {
                let url = 'http://localhost:8080/limits/' + limit.id + '/delete';
                this.axios.post(url).then((response) => {
                    let jsonResult = response.data;
                    if (jsonResult.state == 20000) {
                        this.$message({
                            message: '删除【' + limit.limitName + '】权限成功！',
                            type: 'success'
                        });
                        this.loadlimitList();
                    } else if (jsonResult.state == 40400) {
                        this.$alert(jsonResult.message, '操作失败', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.loadlimitList();
                            }
                        });
                    } else {
                        this.$alert(jsonResult.message, '操作失败', {
                            confirmButtonText: '确定',
                            callback: action => {}
                        });
                    }
                });
            },
            loadlimitList() {
                let url = 'http://localhost:8080/limits?page=1&pageSize='+this.pageSize;

                this.axios.get(url).then((response) => {
                  let jsonResult = response.data;
                  if (jsonResult.state == 20000) {
                    let data = jsonResult.data;
                    this.tableData = data.list;
                    this.currentPage = data.page;
                    this.total = data.total;
                  }else {
                    this.$alert(jsonResult.message, '操作失败', {
                      confirmButtonText: '确定',
                      callback: action => {}
                    });
                  }
                });
            },
            handleSizeChange(val) {
              if(this.isSelect){
                this.onSelectClick(this.currentPage,val);
              }else{
                this.pageSelect(this.currentPage,val);
              }
            },
            handleCurrentChange(val) {
              if(this.isSelect){
                this.onSelectClick(val,this.pageSize);
              }else{
                this.pageSelect(val,this.pageSize);
              }
            },
            pageSelect(page,pageSize){
              let url = 'http://localhost:8080/limits?page='+page+'&pageSize='+pageSize;
              this.axios.get(url).then((response)=>{
                let jsonResult = response.data;
                if (jsonResult.state == 20000) {
                  let data = jsonResult.data;
                  this.tableData = data.list;
                  this.currentPage = data.page;
                  this.total = data.total;
                }else {
                  this.$alert(jsonResult.message, '操作失败', {
                    confirmButtonText: '确定',
                    callback: action => {}
                  });
                }
              })
            },
            onSelectClick(){
              this.isSelect = true;
              let url = 'http://localhost:8080/limits/selectByCondition'
              let data = this.qs.stringify(this.selectForm);
              data = data+'&page=1&pageSize='+this.pageSize;
              this.axios.post(url,data).then((response)=>{
                let jsonResult = response.data;
                if (jsonResult.state == 20000) {
                  let data = jsonResult.data;
                  this.tableData = data.list;
                  this.currentPage = data.page;
                  this.total = data.total;
                }else {
                  this.$alert(jsonResult.message, '操作失败', {
                    confirmButtonText: '确定',
                    callback: action => {}
                  });
                }
              })
            },
            onResetSelect(){
              this.selectForm.limitName='';
              this.isSelect = false;
              this.loadlimitList();
            }
        },
        mounted() {
            this.loadlimitList();
        }
    }
</script>